<template>
<!-- 产品分类 -->
    <div class="goods_cate">
      <div class="title wrapper_1200">
        <nuxt-link class="home" to="/">首页 > </nuxt-link>{{titleName}}
      </div>
      <!-- 条件筛选 -->
      <div class="nav">
        <div class="navCon wrapper_1200 acea-row row-between-wrapper">
          <div class="list acea-row row-middle">
            <div class="item" :class="current===index?'font-color':''" v-for="(item, index) in categoryList" :key="index" @click="category(index)">{{item.cate_name}}</div>
          </div>
          <div class="moreCon" @mouseleave="leave()">
            <div class="more" :class="current===-1?'font-color':''" @mouseenter="enter">
              <span class="iconfont icon-gengduofenlei"></span>更多分类
            </div>
            <div class="moreCategory acea-row row-middle" v-if="seen">
              <div class="item" :class="moreCurrent===index?'font-color':''" v-for="(item, index) in categoryList" :key="index" @click="moreItem(index)">{{item.cate_name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper wrapper_1200">
        <div class="acea-row">
          <div class="name">分类：</div>
          <div class="listCon acea-row row-between">
            <div class="list acea-row row-middle" :class="sortNav?'':'on'">
              <div class="item" :class="erCurrent === index?'font-color':''" v-for="(item, index) in categoryCurrent" :key="index" @click="erCategory(item.id,index)">{{item.cate_name}}</div>
            </div>
            <div class="iconfont" :class="sortNav?'icon-xiangshang':'icon-xiangxia'" @click="sortTap"></div>
          </div>
        </div>
        <div class="sort acea-row" v-if="brandList.length">
          <div class="name">品牌：</div>
          <div class="listCon acea-row row-between" v-if="moreBrand">
            <div class="list acea-row row-middle" :class="brandNav?'':'on'">
              <div class="item" :class="brandCurrent === index?'font-color':''" v-for="(item, index) in brandList" :key="index" @click="brandListTap(item.id,index)">{{item.brand_name}}</div>
            </div>
            <div class="acea-row row-top">
              <div class="selected acea-row row-between" v-if="brandCurrent==-1&&selectedBrand.length">
                <div class="seleBrand line4">
                  <span>已选：</span>
                  <span class="itemBrand" v-for="(item,index) in selectedBrand" :key="index">{{item}}、</span>
                </div>
                <div class="iconfont icon-guanbi5" @click="closeBrand"></div>
              </div>
              <span class="more" @click="moreTap">多选</span>
              <span class="iconfont" :class="brandNav?'icon-xiangshang':'icon-xiangxia'" @click="brandTap"></span>
            </div>
          </div>
          <div class="listCon" v-else>
            <div class="listD">
              <el-checkbox-group v-model="checkList">
                <el-checkbox :label="item.id" v-for="(item,index) in brandList" :key="index" class="itemD">{{item.brand_name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="button">
              <el-button type="primary" size="mini" @click="defineMore">确定</el-button>
              <el-button size="mini" @click="closeBrand">取消</el-button>
            </div>
          </div>
        </div>
        <div class="sort acea-row">
          <div class="name">排序：</div>
          <div class="acea-row row-middle">
            <div class="item" :class="iSdefaults === 0?'font-color':''" @click="defaults">默认</div>
            <div class="item" :class="iSdefaults === 1?'font-color':''" @click="priceSort('desc')" v-if="priceOrder === 'asc'">
              价格
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiageshaixuanshang"></use>
              </svg>
            </div>
            <div class="item" :class="iSdefaults === 1?'font-color':''" @click="priceSort('asc')" v-else-if="priceOrder === ''">
              价格
              <span class="iconfont icon-jiageshaixuan"></span>
            </div>
            <div class="item" :class="iSdefaults === 1?'font-color':''" @click="priceSort('')" v-else>
              价格
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiageshaixuanxia"></use>
              </svg>
            </div>
            <div class="item" :class="iSdefaults === 2?'font-color':''" @click="timeNews">
              上架时间
              <span class="iconfont icon-shangjiashijian" :class="news?'font-color':''"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品展示 -->
      <div class="wrapper_1200">
        <div class="goods acea-row row-middle" v-if="productslist.length">
          <div class="item" v-for="(item, index) in productslist" :key="index" @click="goDetail(item.id)">
            <div class="pictrue"><img v-lazy="item.image"></div>
            <div class="money acea-row row-between-wrapper">
              <div><span class="font-color">¥{{item.price}}</span><span class="y_money">¥{{item.ot_price}}</span></div>
              <div class="label font-color" v-if="item.checkCoupon">券</div>
            </div>
            <div class="name line2">{{item.store_name}}</div>
            <div class="bottom acea-row row-between-wrapper">
              <div>{{item.sales}}人付款</div>
              <div>{{item.star}}分</div>
            </div>
          </div>
        </div>
        <div class='loadingicon acea-row row-center-wrapper' v-if="productslist.length && productslist.length>=limit">
          <span class='loading iconfont icon-jiazai' v-if="!pullRefreshss"></span>{{title}}
        </div>
      </div>
      <div class="noGoods" v-if="!productslist.length">
        <div class="pictrue">
          <img src="../assets/images/noGoods.png">
        </div>
        <div class="name">亲，该分类暂无商品哟~</div>
      </div>
    </div>
</template>

<script>
  import { Message,MessageBox  } from 'element-ui';
    export default {
      name: "goods_cate",
      auth: false,
      data(){
        return {
          categoryList:[],
          categoryCurrent:[],
          current:0,
          moreCurrent:0,
          seen:false,
          titleName:'',
          erCurrent:0,
          iSdefaults:0,
          productslist:[],
          pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
          page: 1, //代表页面的初始页数
          limit:10,
          scollY: null,// 离底部距离有多少
          pageTotal: 0, //总页数
          title:'下拉加载更多',
          cid:0,//一级分类
          sid:0,//二级分类
          priceOrder:'',
          news:0,
          sortNav:false,
          brandNav:false,
          brandList:[],
          brandCurrent:0,
          brandArray:[],
          moreBrand:true,
          checkList:[],
          selectedBrand:[]
        }
      },
      async asyncData({app,query}){
        let [ categoryMsg ] = await Promise.all([
          //获取banner分类
          app.$axios.get('/category'),
        ]);
        let category = categoryMsg.data;
        category.forEach(item => {
          item.children.unshift({
            'id': 0,
            'cate_name': '全部'
          })
        });
        let cidIndex = query.cidIndex?query.cidIndex:0,
            cid = query.cid?query.cid:categoryMsg.data[0].id,
            sid = query.sid?query.sid:0,
            sidIndex = query.sidIndex?parseInt(query.sidIndex):0,
            sidCategory = query.cid?categoryMsg.data[parseInt(cidIndex)].children:categoryMsg.data[0].children,
            titleName = query.cid?categoryMsg.data[parseInt(cidIndex)].cate_name:categoryMsg.data[0].cate_name;
        return {
          categoryList:category,
          categoryCurrent:sidCategory,
          titleName:titleName,
          cid:parseInt(cid),
          sid:parseInt(sid),
          current:parseInt(cidIndex),
          erCurrent:sidIndex,
          moreCurrent:parseInt(cidIndex)
        }
      },
      fetch({ store}) {
        store.commit('isHeader', true);
        store.commit('isFooter', true);
      },
      head() {
        return {
          title: "商品分类-"+this.$store.state.titleCon
        }
      },
      created(){
        this.getBrandList();
      },
      mounted(){
        this.pullRefresh();
      },
      beforeDestroy() {
        window.onscroll = null;
      },
      methods:{
        moreTap(){
          this.checkList = [];
          this.moreBrand = false;
          if(this.brandList[0].id == ''){
            this.brandList.shift();
          }
        },
        closeBrand(){
          this.selectedBrand = [];
          this.moreBrand = true;
          this.brandList.unshift({
            id: '',
            'brand_name':'全部'
          });
					this.iSdefaults = 0;
          this.brandCurrent = 0;
          this.productslist = [];
          this.pullRefreshss = true;
          this.page = 1;
          this.priceOrder = '';
          this.news = 0;
          this.brandArray = []
          this.getProductslist();
        },
        defineMore(){
          if(!this.checkList.length) return Message.error('请选择品牌');
          this.brandArray = this.checkList;
          this.moreBrand = true;
					this.iSdefaults = 0;
          this.brandCurrent = -1;
          this.productslist = [];
          this.pullRefreshss = true;
          this.page = 1;
          this.priceOrder = '';
          this.news = 0;
          this.getProductslist();
          this.selectedBrand = [];
          this.brandList.forEach((i)=>{
            this.checkList.forEach((j)=>{
              if(i.id==j){
                this.selectedBrand.push(i.brand_name)
              }
            })
          })
        },
        sortTap(){
          this.sortNav = !this.sortNav;
        },
        brandTap(){
          this.brandNav = !this.brandNav;
        },
        goDetail: function (id) {
          this.$router.push({ path: `/goods_detail/${id}` });
        },
        getProductslist(){
          let _this = this,currentPage = {page: this.page,limit:this.limit,cid:this.cid,sid:this.sid,priceOrder:this.priceOrder,news:this.news,'brand_id':this.brandArray.join(",")};
          _this.$axios.get('/pc/get_products', {
            params: currentPage
          }).then(function (res) {
            _this.pageTotal = res.data.count;
            // 请求完成后，把得到的数据拼接到当前dom里面
            _this.productslist = _this.productslist.concat(res.data.list);
          }).catch(function (err) {
            _this.$message.error(err);
          })
        },
        getBrandList(){
          let that = this;
          let data = {cid:this.cid,sid:this.sid}
          that.$axios.get('/brand',{
            params:data
          }).then(function (res) {
            let data = res.data;
            if(that.moreBrand){
              data.unshift({
                id: '',
                'brand_name':'全部'
              });
            }
            that.brandList = data;
            that.brandCurrent = 0;
            let brandArray = [];
            brandArray.push(res.data.length?res.data[0].id:'');
            that.brandArray = brandArray;
            that.getProductslist();
          }).catch(function (err) {
            that.$message.error(err);
          })
        },
        // 下拉加载ajax
        pullRefresh: function () {
          var _this = this;
          window.onscroll = function () {
            _this.scrollChange()
          }
        },
        scrollChange: function () {
          let _this = this;
          this.scollY = this.comsys.getScrollTop() + this.comsys.getWindowHeight() - this.comsys.getScrollHeight();
          // 把下拉刷新置为false，防止多次请求
          if (this.scollY >= -50) {
            if (this.page > Math.ceil(this.pageTotal/this.limit)) {
              this.title = '已没有更多数据';
              this.pullRefreshss = true;
              return false;
            }
            if (!this.pullRefreshss) {
              return false;
            }
            _this.pullRefreshss = false;
            _this.title = '正在加载中....';
            // 加页码数
            this.page++;
            _this.getProductslist();
          } else {
            // 其他时候把下拉刷新置为true
            _this.pullRefreshss = true;
            this.title = '下拉加载更多';
          }
        },
        category(index){
          this.moreBrand = true;
          this.current = index;
          this.moreCurrent = index;
          this.categoryCurrent = this.categoryList[index].children;
          this.titleName = this.categoryList[index].cate_name;
					this.iSdefaults = 0;
          this.productslist = [];
          this.pullRefreshss = true;
          this.page = 1;
          this.cid = this.categoryList[index].id;
          this.sid = 0;
          this.erCurrent = 0;
          this.priceOrder = '';
          this.news = 0;
          this.getBrandList();
          this.$router.push({
            path: "/goods_cate",
            query: {
              cid: this.cid,
              sid: this.sid,
              cidIndex: this.current,
              sidIndex: this.erCurrent,
            },
          });
        },
        enter(){
          this.current = -1;
          this.seen = true
        },
        leave(){
          this.seen = false;
          this.current =  this.moreCurrent;
        },
        moreItem(index){
          this.moreBrand = true;
          this.moreCurrent = index;
          this.categoryCurrent = this.categoryList[index].children;
          this.titleName = this.categoryList[index].cate_name;
					this.iSdefaults = 0;
          this.seen = false;
          this.current = index;
          this.productslist = [];
          this.pullRefreshss = true;
          this.page = 1;
          this.cid = this.categoryList[index].id;
          this.sid = 0;
          this.erCurrent = 0;
          this.priceOrder = '';
          this.news = 0;
          this.getBrandList();
        },
        erCategory(id,index){
          this.moreBrand = true;
          this.erCurrent = index;
					this.iSdefaults = 0;
          this.productslist = [];
          this.pullRefreshss = true;
          this.page = 1;
          this.sid = id;
          this.priceOrder = '';
          this.news = 0;
          this.getBrandList();
          this.$router.push({
            path: "/goods_cate",
            query: {
              cid: this.categoryList[this.current].id,
              sid: this.sid,
              cidIndex: this.current,
              sidIndex: this.erCurrent,
            },
          });
        },
        brandListTap(id,index){
          this.brandCurrent = index;
          this.productslist = [];
					this.iSdefaults = 0;
          this.pullRefreshss = true;
          this.page = 1;
          this.priceOrder = '';
          this.news = 0;
          let brandArray = [];
          brandArray.push(id);
          this.brandArray = brandArray
          this.getProductslist();
        },
        defaults(){
          this.iSdefaults = 0;
          this.productslist = [];
          this.pullRefreshss = true;
          this.page = 1;
          this.news = 0;
          this.priceOrder = '';
          this.getProductslist();
        },
        priceSort(sort){
          this.iSdefaults = 1;
          this.productslist = [];
          this.pullRefreshss = true;
          this.page = 1;
          this.news = 0;
          this.priceOrder = sort;
          this.getProductslist();
        },
        timeNews(){
          this.iSdefaults = 2;
          this.productslist = [];
          this.pullRefreshss = true;
          this.priceOrder = '';
          this.page = 1;
          this.news = !this.news===true?1:0;
          this.getProductslist();
        }
      }
    }
</script>

<style scoped lang="scss">
  /deep/.el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #DCDFE6;
  }
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner{
    border-color: #E93323;
  }
  /deep/.el-checkbox{
    color: #282828;
  }
  .goods_cate{
    margin-top: 2px;
    .noGoods{
      text-align: center;
      .pictrue{
        width: 274px;
        height: 174px;
        margin: 130px auto 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        font-size: 14px;
        color: #969696;
        margin-top: 20px;
        margin-bottom: 290px;
      }
    }
    .nav{
      width: 100%;
      height: 50px;
      cursor: pointer;
      margin-bottom: 10px;
      .navCon{
        &.wrapper_1200{
          overflow: unset!important;
          background-color: #fff;
        }
        height: 100%;
        .moreCon{
          position: relative;
          .moreCategory{
            padding: 44px 44px 16px 44px;
            position: absolute;
            z-index: 9;
            top:50px;
            right: 0;
            width: 1200px;
            background-color: #fff;
            box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);
            .item{
              margin: 0 40px 28px 0;
              &:hover{
                color: #E93323;
              }
            }
          }
        }
        .list{
          height: 100%;
          width: 1050px;
          overflow: hidden;
          padding-left: 35px;
          .item{
            height: 100%;
            line-height: 50px;
            overflow: hidden;
            &~.item{
              margin-left: 50px;
            }
            &:hover{
              color: #E93323;
            }
            &.font-color{
              border-bottom: 2px solid #E93323;
            }
          }
        }
        .more{
          position: relative;
          height: 100%;
          line-height: 50px;
          width: 132px;
          text-align: center;
          &:before{
            position: absolute;
            content: ' ';
            left:0;
            top: 50%;
            margin-top: -8px;
            width: 1px;
            height: 16px;
            background-color: #EFEFEF;
          }
          &.font-color{
            border-bottom: 2px solid #E93323;
          }
          .iconfont{
            margin-right: 6px;
          }
        }
      }
    }
    .title{
      color: #999999;
      height: 46px;
      line-height: 46px;
      .home{
        color: #282828;
      }
    }
    .wrapper{
      background-color: #fff;
      padding: 25px 17px;
      cursor: pointer;
      .listCon{
        width: 1100px;
        border-bottom: 1px dotted #EFEFEF;
        padding-bottom: 10px;
        position: relative;
        .selected{
          width: 220px;
          max-height: 94px;
          border-radius: 4px;
          border: 1px solid #DDDDDD;
          padding: 5px 0 5px 10px;
          margin-right: 10px;
          background-color: #fff;
          .seleBrand{
            width: 175px;
            .itemBrand{
              color: #E93323;
            }
          }
          .iconfont{
            padding: 3px 10px 0 10px;
            color: #999;
          }
        }
        .iconfont{
          font-size: 13px;
          color: #888;
          padding: 2px 0 6px 15px;
          &:hover{
            color: #E93323;
          }
        }
        .more{
          color: #888;
          &:hover{
            color: #E93323;
          }
        }
        .button{
          margin-top: 8px;
          margin-bottom: 8px;
        }
        .listD{
          width: 670px;
          /deep/.el-checkbox__label{
            font-weight: normal!important;
          }
          .itemD{
            margin-bottom: 20px;
          }
        }
      }
      .list{
        width: 670px;
        &.on{
          height: 29px;
          overflow: hidden;
        }
        .item{
          margin-right: 30px;
          margin-bottom: 10px;
          &:hover{
            color: #E93323;
          }
        }
      }
      .name{
        color: #969696;
        margin-right: 20px;
      }
      .sort{
        margin-top: 20px;
        .item{
          margin-right: 30px;
          &:hover{
            color: #E93323;
          }
          .icon{
            font-size: 15px;
            margin-left: 5px;
          }
          .iconfont{
            font-size: 15px;
            color: #E2E2E2;
            margin-left: 5px;
          }
        }
      }
    }
    .goods{
      width: 1220px;
      .item{
        background-color: #fff;
        padding: 16px;
        width: 224px;
        height: 340px;
        margin: 20px 20px 0 0;
        cursor: pointer;
        &:hover{
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
        }
        .pictrue{
          width: 192px;
          height: 192px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .money{
          margin-top: 12px;
          .font-color{
            font-weight: bold;
            font-size: 22px;
          }
          .y_money{
            font-size: 12px;
            color: #AAAAAA;
            text-decoration: line-through;
            margin-left: 8px;
          }
          .label{
            width: 20px;
            height: 20px;
            background: linear-gradient(330deg, rgba(231, 85, 67, 0.15) 0%, rgba(244, 103, 83, 0.15) 100%);
            font-size: 12px;
            text-align: center;
            line-height: 20px;
          }
        }
        .name{
          color: #5A5A5A;
          margin-top: 8px;
          height: 40px;
        }
        .bottom{
          font-size: 12px;
          color: #AAAAAA;
          margin-top: 10px;
        }
      }
    }
  }
</style>
